<template>
  <div class='column-detail'>
    <div class="top" v-if="columnInfo">
      <img :src="columnInfo.cover" alt="">
      <div class="right">
        <p>{{ columnInfo.title }}</p>
        <p>{{ columnInfo.description }}</p>
      </div>
    </div>
    <el-divider></el-divider>
    <div v-if="articleList.length > 0">
      <ArticleItem v-for="article in articleList" :key="article.id" :article="article"></ArticleItem>
    </div>
    <div v-else>
      <el-empty description="该专栏下暂无文章!"></el-empty>
      <div class="footer">
        <el-button type="primary" plain size="medium" @click="$router.push('/add-article')">新建文章</el-button>
      </div>
    </div>
    <div class="footer" v-if="!isAll">
      <el-button type="primary" plain size="medium" @click="getMoreArticle">{{ isLoading ? "正在加载..." : "加载更多"}}
      </el-button>
    </div>
  </div>
</template>

<script>
import { getColumnDetail } from '@/api/column'
import ArticleItem from '@/views/Aticle/components/ArticleItem.vue'
import { getArticleList } from '@/api/article'

export default {
  name: 'MyColumnDetail',
  data () {
    return {
      columnId: 0,
      columnInfo: {},
      articleList: [],
      query: {
        currentPage: 1,
        pageSize: 2
      },
      total: 0,
      isLoading: false
    }
  },
  components: {
    ArticleItem
  },
  methods: {
    // 获取专栏信息
    async getColumnInfo () {
      const res = await getColumnDetail(this.columnId)
      if (res.code === 0) {
        this.columnInfo = res.data
      } else {
        this.$message.error(res.msg)
      }
    },

    // 获取文章列表
    async getArticles () {
      const res = await getArticleList(this.columnId, this.query)
      this.articleList = res.data.articles
      this.total = res.data.total
    },

    // 获取更多文章
    async getMoreArticle () {
      this.query.currentPage++
      this.isLoading = true
      const res = await getArticleList(this.columnId, this.query)
      this.isLoading = false
      this.articleList = [...this.articleList, ...res.data.articles]
    }
  },
  computed: {
    isAll () {
      return this.articleList.length === this.total
    }
  },
  created () {
    this.columnId = this.$route.params.columnId
    this.getColumnInfo()
    this.getArticles()
  },
  mounted () { }
}
</script>

<style lang='less' scoped>
.column-detail {
  width: 720px;
  margin: 0 auto;
}

.top {
  height: 200px;
  display: flex;
  align-items: center;

  img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin-right: 30px;
  }

  .right {
    p {
      margin: 10px 0;
      font-size: 16px;

      &:nth-child(1) {
        font-size: 24px;
      }

      &:nth-child(2) {
        color: #6c757d
      }
    }
  }
}

.footer {
  text-align: center;

  .el-button {
    width: 300px;
  }
}
</style>
